<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.energyblue.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.bootstrap.css" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcheckbox.js"></script>

<form class="form-horizontal well">
    <fieldset>
        <legend>Asignar Rúbrica</legend>
        <div id="mensajeControl" style="display: none">
            <button type="button" class="close" data-dismiss="alert">×</button>
        </div>
        <h5>1. Elegir Rúbrica y Curso</h5>
        <div class="row-fluid">
            <div class="control-group">
                <label class="control-label">Rúbrica</label>
                <div class="controls">
                    <select data-placeholder="Seleccionar..." id="rubricas" class="chosen-select">
                        <option value=""></option>
                        <?php foreach ($rubricas as $rubrica) { ?>
                            <option value=<?php echo $rubrica['idRubrica']; ?> > <?php echo $rubrica['nombre']; ?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Curso</label>
                <div class="controls">
                    <select data-placeholder="Seleccionar..." id="cursos" class="chosen-select" >
                        <option value=""></option>
                        <?php foreach ($cursos as $curso) { ?>
                            <option value=<?php echo $curso['idCurso']; ?> > <?php echo $curso['nombre']; ?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>
        </div>
        <div id="aparece" style="display: none">
            <h5>2. Niveles </h5>
                <div class="control-group">
                    <label class="control-label">Tipo Nivel</label>
                    <div id="tipoNivel" class="controls">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Escalas</label>
                    <div  class="controls">
                        <div id="escalas" class="span4"></div>
                    </div>
                </div>

            <h5>3. Detalle Rúbrica </h5>
            <div class="span1"></div>
            <div class="span6">
                <div id="arbol">
                </div>
            </div>


            <div class="span4">
                <div class="control-group">
                    <strong><font id="nbr" color='#0061cc'>Resultado:</font></strong>
                    <label></label>
                    <label></label>
                    <label>Descripción</label>
                    <textarea class='span11' rows='14' id='descripcion' disabled></textarea>
                </div>
                <div class="control-group">
                    <a class="btn btn-primary" onclick="asignar_rubrica_curso();" >Asignar</a>
                    <a class="btn btn-primary" onclick="" >Atrás</a>
                </div>
            </div>
        </div>
    </fieldset>
</form>

<script type="text/javascript">    

    $(document).ready(function() {
        var theme = 'bootstrap';
        $(".chosen-select").chosen({no_results_text: "No hay coincidencias con"});
        $(".chosen-select-deselect").chosen({allow_single_deselect: true});

        $('#arbol').on('select', function (event) {
            var args = event.args;
            var item = $('#arbol').jqxTree('getItem', args.element);
            //evento click
            
            var datos = {
                id : item.id
            };
            
            $.ajax({
                url: "../rubricas/buscar_descripcion",
                type: "POST",
                dataType: "json",
                data: datos,
                success: function(descripcion) {
                    $("#descripcion").val(descripcion[0]);
                    $("#nbr").html(descripcion[1]);
                }
            });
            
        });

        $("#rubricas").on('change', function() {
            
            var idRubrica = $("#rubricas").val();
        
            var datos = {
                idRubrica : idRubrica
            };

            $.ajax({
                url: "../rubricas/cargarArbol",
                type: "POST",
                dataType: 'json',
                data: datos,
                success: function(resultado) {
                        $("#aparece").fadeIn(500);
                        $("#tipoNivel").html(resultado[0]);
                        $("#arbol").html(resultado[1]);
                        $("#escalas").html(resultado[2]);
                        $("#arbol").jqxTree({ hasThreeStates: true, checkboxes: true, height: '600px', width: '400px', theme: theme });
                        //$("#arbol").jqxTree('expandAll');
                        $("#arbol").jqxTree('collapseAll');
                        $("#arbol").jqxTree('selectItem', $("#arbol").find('li:first')[0]);
                }
            });

        });
        
    });
    
</script>